JavaScript 연산자
값을 계산하고 비교하고 논리적으로 판단하는 도구
산술
대입
비교
논리
삼항
우선순위
CHAPTER 01
산술 연산자
숫자를 계산하는 가장 기본적인 연산자예요. 더하기, 빼기, 곱하기, 나누기!
4가지 기본 연산자
// 덧셈
10 + 5; // 15
// 뺄셈
10 - 5; // 5
// 곱셈
10 * 5; // 50
// 나눗셈
10 / 5; // 2
10 + 5; // 15
// 뺄셈
10 - 5; // 5
// 곱셈
10 * 5; // 50
// 나눗셈
10 / 5; // 2
OUTPUT
실행하세요 →
연산자 우선순위: 곱셈이 덧셈보다 먼저!
// 순서 없이: 왼쪽부터 계산
2 + 3 * 4; // 14 (3*4=12 먼저, 2+12)
// 괄호로 순서 지정
(2 + 3) * 4; // 20 (괄호 먼저!)
// 복잡한 계산
3 - 5 * 6 / 2 + 3; // ?
2 + 3 * 4; // 14 (3*4=12 먼저, 2+12)
// 괄호로 순서 지정
(2 + 3) * 4; // 20 (괄호 먼저!)
// 복잡한 계산
3 - 5 * 6 / 2 + 3; // ?
OUTPUT
실행하세요 →
CHAPTER 02
문자열 연결 (덧셈의 특수 기능)
+는 숫자도 계산하고, 문자도 연결해요!
숫자 + 문자 = 문자 연결
// 숫자만
10 + 5; // 15 (계산)
// 숫자 + 문자
10 + "5"; // "105" (연결!)
// 문자 + 숫자
"내 나이: " + 20; // "내 나이: 20"
// 문자 + 문자
"hello" + "world"; // "helloworld"
10 + 5; // 15 (계산)
// 숫자 + 문자
10 + "5"; // "105" (연결!)
// 문자 + 숫자
"내 나이: " + 20; // "내 나이: 20"
// 문자 + 문자
"hello" + "world"; // "helloworld"
OUTPUT
실행하세요 →
⚠️ 주의:
문자와 숫자를 더하면 항상 문자가 돼요!
10 + "5" = "105" (계산이 아니라 연결!)문자와 숫자를 더하면 항상 문자가 돼요!
CHAPTER 03
대입 연산자
=와 산술 연산자를 합친 편리한 문법!
산술 대입 연산자
// ❌ 기존 방법 (길어짐)
let x = 10;
x = x + 5; // 15
// ✅ 대입 연산자 (간단!)
let y = 10;
y += 5; // 15
// 모든 산술 연산자 가능
x -= 3; // x = x - 3
x *= 2; // x = x * 2
x /= 4; // x = x / 4
let x = 10;
x = x + 5; // 15
// ✅ 대입 연산자 (간단!)
let y = 10;
y += 5; // 15
// 모든 산술 연산자 가능
x -= 3; // x = x - 3
x *= 2; // x = x * 2
x /= 4; // x = x / 4
OUTPUT
실행하세요 →
CHAPTER 04
증감 연산자 (전위 vs 후위)
가장 헷갈리는 연산자! 순서가 중요해요.
++num (전위) vs num++ (후위)
// 전위: 먼저 증가, 그 다음 사용
let num = 10;
let result = ++num; // num이 11로 증가 → 그걸 사용
console.log(result, num); // 11, 11
// 후위: 먼저 사용, 그 다음 증가
let num2 = 10;
let result2 = num2++; // 10을 사용 → 그 다음 11로 증가
console.log(result2, num2); // 10, 11
let num = 10;
let result = ++num; // num이 11로 증가 → 그걸 사용
console.log(result, num); // 11, 11
// 후위: 먼저 사용, 그 다음 증가
let num2 = 10;
let result2 = num2++; // 10을 사용 → 그 다음 11로 증가
console.log(result2, num2); // 10, 11
OUTPUT
실행하세요 →
💡 언제 차이가 날까?
값을 할당할 때만 차이가 난다!
값을 할당할 때만 차이가 난다!
i++와 ++i 혼자 쓸 때는 같아.
CHAPTER 05
비교 연산자
항상 true 또는 false를 반환해요!
대소 비교
5 > 3; // true
5 < 3; // false
5 >= 5; // true (같아도 OK)
5 <= 3; // false
5 < 3; // false
5 >= 5; // true (같아도 OK)
5 <= 3; // false
동등(==) vs 일치(===) — 매우 중요!
// == : 값만 같으면 true (타입 무시)
5 == "5"; // true! (숫자와 문자는 다르지만)
// === : 값과 타입이 모두 같아야 true
5 === "5"; // false! (숫자와 문자는 다르다)
5 === 5; // true
// != 와 !== 도 같은 원리
5 != "5"; // false
5 !== "5"; // true
5 == "5"; // true! (숫자와 문자는 다르지만)
// === : 값과 타입이 모두 같아야 true
5 === "5"; // false! (숫자와 문자는 다르다)
5 === 5; // true
// != 와 !== 도 같은 원리
5 != "5"; // false
5 !== "5"; // true
OUTPUT
실행하세요 →
⭐ 권장: 항상
===와 !==를 사용하세요!==는 예상 못한 버그를 만들어요.
CHAPTER 06
논리 연산자
true/false를 논리적으로 조합해요!
AND (&&) — 둘 다 true여야 true
true && true; // true
true && false; // false
false && true; // false
false && false; // false
// 실제 예: 성인이면서 학생?
(age >= 18) && (isStudent === true)
true && false; // false
false && true; // false
false && false; // false
// 실제 예: 성인이면서 학생?
(age >= 18) && (isStudent === true)
OR (||) — 하나라도 true면 true
true || true; // true
true || false; // true
false || true; // true
false || false; // false
// 실제 예: WiFi 있거나 모바일 있으면 연결 가능
hasWiFi || hasMobileData
true || false; // true
false || true; // true
false || false; // false
// 실제 예: WiFi 있거나 모바일 있으면 연결 가능
hasWiFi || hasMobileData
NOT (!) — 반대로 뒤집기
!true; // false
!false; // true
// 실제 예: 바쁘지 않으면 (자유로우면)
!isBusy
!false; // true
// 실제 예: 바쁘지 않으면 (자유로우면)
!isBusy
OUTPUT
실행하세요 →
CHAPTER 07
삼항 조건 연산자
if/else를 한 줄로!
조건 ? true일 때 : false일 때
// 문법
condition ? valueIfTrue : valueIfFalse;
// 예시 1: 나이 확인
let age = 20;
let status = age >= 18 ? "성인" : "미성년자";
console.log(status); // "성인"
// 예시 2: 점수 판정
let score = 85;
let result = score >= 80 ? "합격" : "불합격";
condition ? valueIfTrue : valueIfFalse;
// 예시 1: 나이 확인
let age = 20;
let status = age >= 18 ? "성인" : "미성년자";
console.log(status); // "성인"
// 예시 2: 점수 판정
let score = 85;
let result = score >= 80 ? "합격" : "불합격";
OUTPUT
실행하세요 →
CHAPTER 08
연산자 우선순위
연산자들이 계산되는 순서를 정확히 알아야 버그가 안 생겨요!
우선순위 순서 (높은 순)
PRIORITY ORDER
| 순위 | 연산자 | 설명 | 예시 |
|---|---|---|---|
| 1️⃣ | () |
괄호 | (2+3)*4 |
| 2️⃣ | ++, -- |
후위 증감 | i++ |
| 3️⃣ | ++, -- |
전위 증감 | ++i |
| 4️⃣ | ! |
NOT | !true |
| 5️⃣ | *, / |
곱셈, 나눗셈 | 10*2/5 |
| 6️⃣ | +, - |
덧셈, 뺄셈 | 10+5-2 |
| 7️⃣ | <, >, <=, >= |
대소 비교 | age>20 |
| 8️⃣ | ==, ===, !=, !== |
동등/일치 | x===5 |
| 9️⃣ | && |
AND | a&&b |
| 🔟 | || |
OR | a||b |
| 1️⃣1️⃣ | ? : |
삼항 | condition?a:b |
| 1️⃣2️⃣ | =, +=, -=... |
대입 | x=10 |
우선순위 예시
// 예시 1: 곱셈이 덧셈보다 먼저
2 + 3 * 4 = 14 // 3*4=12 먼저, 2+12=14
// 예시 2: 비교가 AND보다 먼저
age > 20 && isStudent
// 1단계: age > 20 (비교)
// 2단계: 결과 && isStudent (AND)
// 예시 3: 확실하지 않으면 괄호!
(2 + 3) * 4 = 20 // 괄호 먼저!
2 + 3 * 4 = 14 // 3*4=12 먼저, 2+12=14
// 예시 2: 비교가 AND보다 먼저
age > 20 && isStudent
// 1단계: age > 20 (비교)
// 2단계: 결과 && isStudent (AND)
// 예시 3: 확실하지 않으면 괄호!
(2 + 3) * 4 = 20 // 괄호 먼저!
OUTPUT
실행하세요 →
💡 팁: 확실하지 않으면 괄호를 쓰세요!
(2 + 3) * 4 ← 이렇게 명확하게 하는 게 코드 가독성도 좋아요!